<template>
    <div>
        <div id="container"></div>
    </div>
</template>

<script>
import { Pie } from '@antv/g2plot';
export default {
    data(){
        return{
            humiWarnList:{
                count:3,
                list:[
                    {
                        room:114,
                        status:'nok',
                        time:1145141919.0,
                    },
                    {
                        room:514,
                        status:'nok',
                        time:1145141919.0,
                    },
                    {
                        room:810,
                        status:'nok',
                        time:1145141919.0,
                    },
                    {
                        name:'191',
                        room:114,
                        status:'ok',
                        time:1145141919.0,
                    },
                ]
            },
            tempWarnList:{
                count:2,
                list:[
                    {
                        room:514,
                        status:'nok',
                        time:1145141919.0,
                    },
                    {
                        room:810,
                        status:'nok',
                        time:1145141919.0,
                    },
                    {
                        name:'191',
                        room:114,
                        status:'ok',
                        time:1145141919.0,
                    },
                ]
            },
            stealWarnList:{
                count:1,
                list:[
                    {
                        room:114,
                        status:'nok',
                        time:1145141919.0,
                    },
                    {
                        room:514,
                        status:'ok',
                        time:1145141919.0,
                    },
                    {
                        room:810,
                        status:'ok',
                        time:1145141919.0,
                    },
                    {
                        name:'191',
                        room:114,
                        status:'ok',
                        time:1145141919.0,
                    },
                ]
            },
        }
    },
    mounted(){
        this.piePaint();
    },
    methods:{
        piePaint(){
            const data = [
              { type: '湿度异常', value: this.humiWarnList.count },
              { type: '温度异常', value: this.tempWarnList.count },
              { type: '安全报警', value: this.stealWarnList.count },
            ];

            const piePlot = new Pie('container', {
              appendPadding: 10,
              data,
              angleField: 'value',
              colorField: 'type',
              radius: 0.5,
              label: {
                type: 'inner',
                offset: '-30%',
                content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
                style: {
                  fontSize: 14,
                  textAlign: 'center',
                },
              },
              interactions: [{ type: 'element-active' }],
            });

            piePlot.render();
        }
    }
}
</script>

<style lang="scss" scoped>

</style>